<template>
  <div class="stock-warning">
    <!-- 筛选区 -->
    <el-card class="mb-4" shadow="never">
      <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item label="预警类型">
          <el-select v-model="searchForm.type" clearable placeholder="全部" style="width:140px;">
            <el-option label="低于预警库存" value="低库存"/>
            <el-option label="超储" value="超储"/>
            <el-option label="即将过期" value="即将过期"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="searchForm.name" clearable placeholder="物料名称"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" :disabled="!selectedRows.length" @click="batchMarkRead">批量标为已读</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 预警通知表格 -->
    <el-table
      :data="filteredData"
      border
      style="width:100%;"
      @selection-change="val => selectedRows = val"
      ref="tableRef"
    >
      <el-table-column type="selection" width="48"/>
      <el-table-column prop="name" label="物料名称" width="130"/>
      <el-table-column prop="code" label="物料编码" width="120"/>
      <el-table-column prop="type" label="预警类型" width="110">
        <template #default="{ row }">
          <el-tag :type="typeTag(row.type)">{{ row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="预警说明" />
      <el-table-column prop="stock" label="实时库存" width="110"/>
      <el-table-column prop="warning" label="预警库存" width="110"/>
      <el-table-column prop="expireDate" label="有效期" width="110"/>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.status==='未读'?'danger':'info'">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row, $index }">
          <el-button size="small" @click="markRead(row)">标为已读</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 通知弹窗 -->
    <el-dialog title="库存预警通知" v-model="showDialog" width="420px" :close-on-click-modal="false">
      <div v-if="currentRow">
        <p><b>物料名称：</b>{{ currentRow.name }}</p>
        <p><b>物料编码：</b>{{ currentRow.code }}</p>
        <p><b>预警类型：</b>{{ currentRow.type }}</p>
        <p><b>说明：</b>{{ currentRow.desc }}</p>
        <p><b>实时库存：</b>{{ currentRow.stock }}</p>
        <p><b>预警库存：</b>{{ currentRow.warning }}</p>
        <p v-if="currentRow.expireDate"><b>有效期：</b>{{ currentRow.expireDate }}</p>
      </div>
      <template #footer>
        <el-button @click="showDialog=false">关闭</el-button>
        <el-button type="primary" v-if="currentRow && currentRow.status==='未读'" @click="markRead(currentRow)">标为已读</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

// 生成模拟预警数据
const allData = ref(generateWarnings())
function generateWarnings() {
  const mat = ['对乙酰氨基酚', '头孢拉定原料', '维生素C粉', '葡萄糖', '乳糖', '阿莫西林', '塑料瓶', '纸箱']
  const arr = []
  for (let i = 0; i < 14; i++) {
    let type, desc, stock, warning, expireDate = ''
    const cat = mat[i % mat.length]
    if (i % 3 === 0) {
      type = '低库存'
      warning = Math.floor(Math.random() * 300) + 200
      stock = warning - Math.floor(Math.random() * 40) - 5
      desc = '实时库存低于预警库存'
    } else if (i % 3 === 1) {
      type = '超储'
      warning = Math.floor(Math.random() * 400) + 100
      stock = warning + Math.floor(Math.random() * 300) + 100
      desc = '库存超过上限，注意储位压力'
    } else {
      type = '即将过期'
      warning = Math.floor(Math.random() * 100) + 50
      stock = warning + Math.floor(Math.random() * 80)
      expireDate = (new Date(Date.now() + (Math.floor(Math.random() * 6) + 2) * 86400000)).toISOString().slice(0, 10)
      desc = '有效期不足7天，请及时处理'
    }
    arr.push({
      name: cat,
      code: 'MAT' + (10000 + i),
      type,
      desc,
      stock,
      warning,
      expireDate,
      status: Math.random() < 0.5 ? '未读' : '已读'
    })
  }
  return arr
}

// 筛选
const searchForm = reactive({ type: '', name: '' })
const filteredData = computed(() =>
  allData.value.filter(row =>
    (!searchForm.type || row.type === searchForm.type) &&
    (!searchForm.name || row.name.includes(searchForm.name))
  )
)
function handleSearch() {}
function resetSearch() {
  searchForm.type = ''
  searchForm.name = ''
}

// 列表状态和操作
function typeTag(type) {
  if (type === '低库存') return 'danger'
  if (type === '超储') return 'warning'
  if (type === '即将过期') return 'info'
  return 'default'
}
const selectedRows = ref([])
function batchMarkRead() {
  selectedRows.value.forEach(row => { row.status = '已读' })
  ElMessage.success('批量已读完成')
  selectedRows.value = []
}
function markRead(row) {
  if (row.status === '未读') {
    row.status = '已读'
    ElMessage.success('标为已读')
  }
}

// 通知弹窗
const showDialog = ref(false)
const currentRow = ref(null)
function showDetail(row) {
  currentRow.value = row
  showDialog.value = true
}
</script>

<style scoped>
.stock-warning {
  padding: 20px 16px;
}
.mb-4 { margin-bottom: 16px;}
</style>
